<template>
  <div class="app-container">

    <el-table v-loading="loading" :data="teamsList" @selection-change="handleSelectionChange">

      <el-table-column label="队伍ID" align="center" prop="teamId" />
      <el-table-column label="队伍名称" align="center" prop="teamName" />
      <el-table-column label="队伍简介" align="center" prop="teamOutline" />
      <el-table-column label="所属活动ID" align="center" prop="actId" />
      <el-table-column label="队伍状态" align="center" prop="teamStatus">
        <template #default="scope">
          <dict-tag :options="team_status" :value="scope.row.teamStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Search" @click="getTeamInfoVo(scope.row)" >查看详情</el-button>
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" >修改</el-button>
          <el-button link type="primary" icon="Edit" @click="makeNotice(scope.row)" >发布公告</el-button>
          <el-button link type="primary" icon="Search" @click="showNotice(scope.row)" >查看公告</el-button>
          <el-button link type="primary" icon="Plus" @click="inviteMember(scope.row)" >邀请成员</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" >解散队伍</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改队伍对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="teamsRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="队伍名称" prop="teamName">
          <el-input v-model="form.teamName" placeholder="请输入队伍名称" />
        </el-form-item>
        <el-form-item label="队伍简介" prop="teamOutline">
          <el-input v-model="form.teamOutline" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="所属活动ID" prop="actId">
          <el-input v-model="form.actId" placeholder="请输入所属活动ID" />
        </el-form-item>
        <el-form-item label="队伍状态" prop="teamStatus">
          <el-radio-group v-model="form.teamStatus">
            <el-radio
              v-for="dict in team_status"
              :key="dict.value"
              :label="parseInt(dict.value)"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>



    <el-dialog :title="队伍详情" v-model="TeamInfoOpen" width="1000px" append-to-body class="custom-dialog">
      <el-row>
        <el-col :span="12">队伍ID：{{form.teamId}}</el-col>
        <el-col :span="12">队伍名称：{{form.teamName}}</el-col>
      </el-row>
      <el-row>
<!--        <el-col :span="12">队长名称：{{form.leaderName}}</el-col>-->
        <el-col :span="12">
          队长名称：
          <el-link type="primary" @click="openUserInfoDialog(form.leaderName)">
            {{ form.leaderName }}
          </el-link>
        </el-col>

        <el-col :span="24">队伍简介：{{form.teamOutline}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">活动ID：{{form.actId}}</el-col>
        <el-col :span="12">活动名称：{{form.actTitle}}</el-col>
      </el-row>
      <!-- 队员信息 -->
      <el-row>
        <el-col :span="24"><b>队员名单：</b></el-col>
      </el-row>

<!--      <el-row v-for="(row, index) in formattedMembers" :key="index">-->
<!--        <el-col :span="12" v-for="(member, idx) in row" :key="idx">-->
<!--          <el-link type="primary" @click="openUserInfoDialog(member)">-->
<!--            {{ member }}-->
<!--          </el-link>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <el-row v-for="(row, index) in formattedMembers" :key="index">
        <el-col :span="12" v-for="(member, idx) in row" :key="idx" class="member-item">
          <div class="member-entry">
            <el-link type="primary" @click="openUserInfoDialog(member)">
              {{ member }}
            </el-link>
            <el-button
                type="danger"
                size="small"
                class="kick-button"
                @click="handleRemove(member, form.teamId)"
            >
              踢出
            </el-button>
          </div>
        </el-col>
      </el-row>


    </el-dialog>

    <!-- 发布公告 -->
    <el-dialog :title="title" v-model="AddNoticeOpen" width="500px" append-to-body>
      <el-form ref="NoticeRef" :model="noticeForm" :rules="noticeRules" label-width="80px">
        <el-form-item label="队伍ID" prop="teamId">
          <el-input v-model="noticeForm.teamId" placeholder="请输入所属队伍ID"  readonly />
        </el-form-item>
        <el-form-item label="队伍名称" prop="teamName">
          <el-input v-model="noticeForm.teamName" placeholder="请输入队伍名称"  readonly />
        </el-form-item>
        <el-form-item label="正文内容" prop="body">
          <el-input v-model="noticeForm.body" placeholder="请输入正文" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitNoticeForm">确 定</el-button>
          <el-button @click="cancelNotice">取 消</el-button>
        </div>
      </template>
    </el-dialog>


<!--    查看某队所有公告-->
    <el-dialog :title="title" v-model="NoticeOpen" width="1500px" append-to-body>
      <el-table v-loading="loading" :data="noticeList">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="队伍ID" align="center" prop="teamId" />
      <el-table-column label="队伍名称" align="center" prop="teamName" />
      <el-table-column label="公告正文" align="center" prop="body" >
        <template #default="scope">
          <el-tooltip :content="scope.row.body" placement="top">
            <span>
              {{ scope.row.body.length > 10 ? scope.row.body.slice(0, 10) + '...' : scope.row.body }}
            </span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="发送时间" align="center" prop="sendTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.sendTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Delete" @click="handleDeleteNotice(scope.row)">删除</el-button>
          <el-button link type="primary" icon="Search" @click="handleSearchConfirmMembers(scope.row)">查看确认者名单</el-button>
        </template>
      </el-table-column>
      </el-table>
      <pagination
          v-show="total>0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="showNotice"
      />
    </el-dialog>


<!--    查看确认者名单弹窗-->
    <el-dialog
        v-model="ConfirmedInfoOpen"
        title="已确认成员名单"
        width="500px"
        append-to-body
    >
      <template #default>
        <div v-if="confirmedNames">
          <p><strong>已确认成员：</strong></p>
          <p>{{ confirmedNames }}</p>
          <el-tag type="success" v-if="isAllConfirmed">全部已确认</el-tag>
          <el-tag type="warning" v-else>尚未全部确认</el-tag>
        </div>
        <div v-else>
          <el-empty description="暂无确认记录" />
        </div>
      </template>
    </el-dialog>

<!--    邀请成员弹窗-->
    <el-dialog v-model="inviteDialogVisible" title="邀请成员" width="500px">

      <el-form :model="inviteData.form" :rules="inviteData.rules" ref="inviteFormRef" label-width="100px">
        <el-form-item label="受邀者ID" prop="toId">

          <el-input v-model="inviteData.form.toId" placeholder="请输入受邀者ID" />
        </el-form-item>
        <el-form-item label="邀请语" prop="tips">
          <el-input type="textarea" v-model="inviteData.form.tips" placeholder="请输入邀请语" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="inviteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="openSearchByTagDialog">按标签搜寻队友</el-button>
        <el-button type="primary" @click="submitInvite">确认邀请</el-button>
      </template>
    </el-dialog>

<!--    按照标签邀请成员弹窗-->
    <el-dialog v-model="tagSearchDialogVisible" title="按标签搜寻队友" width="700px">
      <el-input
          v-model="tagQueryParams.tagName"
          placeholder="搜索标签名"
          style="width: 300px; margin-bottom: 10px"
          @keyup.enter="fetchTags"
      />
      <el-button @click="fetchTags">搜索</el-button>

      <div style="margin-top: 10px">
        <b>待选择标签：</b>
        <div style="margin: 10px 0;">
          <el-tag
              v-for="tag in allTags"
              :key="tag.tagId"
              style="margin-right: 5px; cursor: pointer"
              :type="selectedTags.find(t => t.tagId === tag.tagId) ? 'success' : 'info'"
              @click="toggleTag(tag)"
          >
            {{ tag.tagName }}
          </el-tag>
        </div>

      </div>

      <div>
        <b>已选标签：</b>
        <div style="margin: 10px 0;">
          <el-tag
              v-for="tag in selectedTags"
              :key="tag.tagId"
              closable
              type="success"
              style="margin-right: 5px;"
              @close="toggleTag(tag)"
          >
            {{ tag.tagName }}
          </el-tag>
        </div>
        <el-button type="primary" @click="searchUsersByTags">查询</el-button>
      </div>

      <div style="margin-top: 20px;">
        <b>匹配用户：</b>
        <div v-for="user in tagSearchResult" :key="user.userId" style="margin: 10px 0;">
          用户ID：{{ user.userId }}，昵称：{{ user.nickName }}
          <el-button type="success" size="small" @click="inviteUserFromTag(user.userId)">邀请</el-button>
        </div>
      </div>
    </el-dialog>


    <!--用户详细信息弹窗-->
    <el-dialog
        :title="userInfo.nickName + ' 的详细信息'"
        v-model="userInfoDialogVisible"
        width="500px"
        append-to-body
    >
      <el-descriptions column="1" border>
        <el-descriptions-item label="昵称">{{ userInfo.nickName }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ userInfo.phoneNumber }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ userInfo.email }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ userInfo.sex === '0' ? '男' : userInfo.sex === '1' ? '女' : '未知' }}</el-descriptions-item>
      </el-descriptions>


      <div style="margin-top: 20px;">
        <b>用户标签：</b>
        <div style="margin-top: 10px;">
          <el-tag
              v-for="(tag, index) in userTags"
              :key="index"
              type="success"
              style="margin-right: 8px;"
          >
            {{ tag.tagName }}
          </el-tag>
        </div>
      </div>
    </el-dialog>




  </div>


</template>

<style scoped>
  .custom-dialog {
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    width: 600px; /* 增大对话框宽度 */
  }

  .custom-dialog .el-dialog__header {
    background-color: #f0f9eb;
    border-bottom: 1px solid #ebedf0;
    padding: 20px; /* 增加头部的内边距 */
  }

  .custom-dialog .el-dialog__title {
    color: #67c23a;
    font-size: 22px; /* 增大标题字体大小 */
    font-weight: bold; /* 标题加粗 */
  }

  .custom-dialog .el-row {
    margin-bottom: 20px; /* 增大行之间的间距 */
  }

  .custom-dialog .el-col {
    color: #333;
    font-size: 16px; /* 增大内容字体大小 */
  }

  .custom-dialog .el-col b {
    color: #606266;
    font-size: 18px; /* 增大加粗文本的字体 */
  }

  .custom-dialog .el-col .el-row {
    margin-bottom: 10px;
  }


  .member-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
  }

  .kick-button {
    padding: 2px 10px;
    font-size: 12px;
  }


</style>


<script setup name="Teams">
import { listTeams, getTeams, delTeams, addTeams, updateTeams, showJoinedTeams, showMyTeams} from "@/api/match/teams";
import { listMemberTeam, getMemberTeam, leaveTeam, removeMember} from "@/api/match/MemberTeam";
import { addNotice, teamListNotice, delNotice} from "@/api/match/Notice";
import { getConfirmedMembers} from "@/api/match/confirm";
import { addInvite} from "@/api/match/invite";
import { getUserInfo } from "@/api/match/UserInfo";
import { getTag, listUsersByTags } from "@/api/match/MyTag";
import { listTag } from "@/api/match/tag";



const { proxy } = getCurrentInstance();
const { team_status } = proxy.useDict('team_status');

const teamsList = ref([]);
const noticeList = ref([]);
const inviteFormRef = ref(null);


const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    teamId: null,
    teamName: null,
    actId: null,
  },
  rules: {
    teamName: [
      { required: true, message: "队伍名称不能为空", trigger: "blur" }
    ],
    teamOutline: [
      { required: true, message: "队伍简介不能为空", trigger: "blur" }
    ],
    actId: [
      { required: true, message: "所属活动ID不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

//按照标签邀请成员方法↓
const tagSearchDialogVisible = ref(false); // 控制新弹窗
const allTags = ref([]); // 所有标签
const selectedTags = ref([]); // 已选标签
const tagQueryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  tagName: null
});
const tagSearchResult = ref([]); // 搜索结果的用户
const totalTags = ref(0);

// 打开弹窗时初始化标签
function openSearchByTagDialog() {
  tagSearchDialogVisible.value = true;
  fetchTags();
}

// 查询所有标签（分页 + 搜索）
function fetchTags() {
  listTag(tagQueryParams).then(res => {
    allTags.value = res.rows || [];
    totalTags.value = res.total || 0;
  });
}

// 查询包含所有选中标签的用户
function searchUsersByTags() {
  const tagIds = selectedTags.value.map(tag => tag.tagId);
  listUsersByTags(tagIds).then(res => {
    tagSearchResult.value = res.data || [];
  });
}

// 标签添加/移除
function toggleTag(tag) {
  const index = selectedTags.value.findIndex(t => t.tagId === tag.tagId);
  if (index === -1) {
    selectedTags.value.push(tag);
  } else {
    selectedTags.value.splice(index, 1);
  }
}

// 点击邀请后将 userId 回填原表单
function inviteUserFromTag(userId) {
  console.log('即将邀请的用户ID:', userId);
  inviteData.form.toId = userId;
  tagSearchDialogVisible.value = false;
}


//按照标签邀请成员方法↑





// 用户信息相关方法
const userInfoDialogVisible = ref(false)
const userInfo = reactive({
  nickName: '',
  phoneNumber: '',
  email: '',
  sex: ''
})
const userTags = ref([])

// 点击用户名称时调用
const openUserInfoDialog = async (leaderName) => {
  const res1 = await getUserInfo(leaderName)
  Object.assign(userInfo, res1.data || {})

  getTag(leaderName).then(response => {
    userTags.value = response.rows || [];
  });

  userInfoDialogVisible.value = true
}


// 踢出队员
const handleRemove = (userName, teamId) => {
  ElMessageBox.confirm(`确定要踢出队员「${userName}」吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    removeMember(userName, teamId).then(res => {
      if (res.code === 200) {
        proxy.$message.success('踢出成功');
        // getTeamDetail(form.teamId); // 如果有刷新队伍详情的方法
        reGetTeamInfoVo(teamId);
      } else {
        proxy.$message.error(res.msg || '踢出失败');
      }
    });
  }).catch(() => {
    proxy.$message.info('已取消操作');
  });
};



//创建公告：
const noticeData = reactive({
  form: {
    noticeId: null,
    teamId: null,
    teamName: '',
    body: '',
    sendTime: ''
  },
  // 分页查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 5,
    teamId: null  // 可用于筛选某个队伍的公告
  },
  rules: {
    teamId: [
      { required: true, message: "队伍ID不能为空", trigger: "blur" }
    ],
    teamName: [
      { required: true, message: "队伍名称不能为空", trigger: "blur" }
    ],
    body: [
      { required: true, message: "公告正文不能为空", trigger: "blur" }
    ]
  }
});

const { form: noticeForm, rules: noticeRules } = toRefs(noticeData);

// 创建邀请：
const inviteData = reactive({
  form: {
    fromId: null,       // 邀请人ID（可由后端自动补全）
    toId: null,         // 被邀请人ID
    teamId: null,       // 所属队伍ID
    tips: '',           // 邀请语
    inviteStatus: 0     // 默认是 0 表示未处理
  },
  // 查询参数（用于分页、筛选等）
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    teamId: null,       // 可根据队伍查询某队的邀请记录
    inviteStatus: null  // 可用于筛选不同状态的邀请
  },
  rules: {
    toId: [
      { required: true, message: "受邀人ID不能为空", trigger: "blur" }
    ],
    teamId: [
      { required: true, message: "队伍ID不能为空", trigger: "blur" }
    ],
    tips: [
      { required: true, message: "邀请语不能为空", trigger: "blur" }
    ]
  }
});



const inviteDialogVisible = ref(false)
// 点击邀请按钮（从队伍行中获取 teamId）
function inviteMember(row) {
  inviteData.form.teamId = row.teamId;
  inviteDialogVisible.value = true;
}
// 提交邀请
function submitInvite() {
  inviteFormRef.value.validate(valid => {
    if (valid) {
      addInvite(inviteData.form).then(() => {
        proxy.$modal.msgSuccess("邀请已发送！");
        inviteDialogVisible.value = false;
      });
    }
  });
}





/** 查询队伍列表 */
function getList() {
  loading.value = true;
  showMyTeams().then(response => {
    loading.value = false;
    if (response === null) {
      // 后端返回null时的友好提示
      ElMessage.info('您当前未创建任何队伍，快去开始组队吧！');
      teamsList.value = [];  // 清空队伍列表
      total.value = 0;
    } else {
      teamsList.value = response.rows;
      total.value = response.total;
    }
  }).catch(error => {
    loading.value = false;
    console.error(error);
    ElMessage.error('加载失败，请稍后重试');
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

function cancelNotice() {
  AddNoticeOpen.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    teamId: null,
    teamName: null,
    teamOutline: null,
    actId: null,
    teamStatus: null,
    memberNames: ""
  };
  proxy.resetForm("teamsRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.teamId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加队伍";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _teamId = row.teamId || ids.value
  getTeams(_teamId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改队伍";
  });
}

/** 查看详情按钮操作 */
const TeamInfoOpen = ref(false)
function getTeamInfoVo(row) {
  reset();
  const _teamId = row.teamId
  getTeams(_teamId).then(response => {
    form.value = response.data;
    TeamInfoOpen.value = true;
  });
}
function reGetTeamInfoVo(teamId) {
  getTeams(teamId).then(response => {
    form.value = response.data;
    TeamInfoOpen.value = true;
  });
}


/** 查看某队所有公告 */
const NoticeOpen = ref(false)
function showNotice(row) {

  const _teamId = row.teamId

  loading.value = true;
  teamListNotice(_teamId).then(response => {
    noticeList.value = response.rows;
    total.value = response.total;
    loading.value = false;
    NoticeOpen.value = true;
  });
}


/** 查看确认者名单按钮操作 */
const ConfirmedInfoOpen = ref(false)
const confirmedNames = ref('')
const isAllConfirmed = ref(false)
function handleSearchConfirmMembers(row) {
  const _noticeId = row.noticeId
  getConfirmedMembers(_noticeId).then(response => {
    confirmedNames.value = response.data.userNames || '';
    isAllConfirmed.value = response.data.allConfirmed || false;
    ConfirmedInfoOpen.value = true;
  });
}




/**用户自己退出队伍*/
function leavingTeam(row){
  const _teamId = row.teamId
  proxy.$modal.confirm('是否确认退出队伍编号为"' + _teamId + '"的数据项？').then(function() {
    return leaveTeam(_teamId);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("退出成功！");
  }).catch(() => {});


}

/** 发布公告按钮操作 */
const AddNoticeOpen = ref(false)
function makeNotice(row) {
  const _teamId = row.teamId
  getTeams(_teamId).then(response => {
    noticeForm.value = response.data;
    AddNoticeOpen.value = true;
    title.value = "发布公告";
  });
}




/** 提交按钮 */
function submitForm() {
  proxy.$refs["teamsRef"].validate(valid => {
    if (valid) {
      if (form.value.teamId != null) {
        updateTeams(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addTeams(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 提交按钮——发布公告 */
function submitNoticeForm() {
  proxy.$refs["NoticeRef"].validate(valid => {
    if (valid) {
        addNotice(noticeForm.value).then(response => {
          proxy.$modal.msgSuccess("发布成功");
          AddNoticeOpen.value = false;
          getList();
        });

    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _teamIds = row.teamId || ids.value;
  proxy.$modal.confirm('是否确认删除队伍编号为"' + _teamIds + '"的数据项？').then(function() {
    return delTeams(_teamIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}


/** 删除按钮操作 */
function handleDeleteNotice(row) {
  const _noticeIds = row.noticeId || ids.value;
  proxy.$modal.confirm('是否确认删除查看所有公告编号为"' + _noticeIds + '"的数据项？').then(function() {
    return delNotice(_noticeIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('match/teams/export', {
    ...queryParams.value
  }, `teams_${new Date().getTime()}.xlsx`)
}

getList();


import { computed } from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

// const formattedMembers = computed(() => {
//   if (!form.value.memberNames) return [];
//   const members = form.value.memberNames.split(", "); // 按逗号分割
//   const result = [];
//   for (let i = 0; i < members.length; i += 2) {
//     result.push(members.slice(i, i + 2)); // 每两个一组
//   }
//   return result;
// });
const formattedMembers = computed(() => {
  if (!form.value.memberNames) return [];
  const members = form.value.memberNames.split(", "); // 按逗号分割
  const result = [];
  for (let i = 0; i < members.length; i += 2) {
    result.push(members.slice(i, i + 2)); // 每两个一组
  }
  return result;
});

</script>
